<template>
	<view class="spread flex justify-center" :class="{'box-spread': showFlag}" style="gap: 40rpx;">
		<view class="flex flex-col justify-center" v-for="(arr, idx) in list" :key="idx"
			:style="(idx != 0 && idx != 4) ? style : ''">
			<view class="spread-item flex flex-col items-center" v-for="(item, i) in arr" :key="i">
				<text class="spread-up">{{item.up}}</text>
				<template v-if="isAch == 1">
					<image :src="item.front" mode="widthFix" v-if="item.dir == 0"></image>
					<image :src="item.back" mode="widthFix" v-else></image>
				</template>
				<template v-else>
					<image src="@/static/tarot-bg.png" mode="widthFix"></image>
					<text class="spread-name">{{item.label}}</text>
				</template>
				<text class="spread-label flex justify-center">{{item.state}}</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	const style = ref({
		gap: '20rpx'
	})
	const list = ref([
		[{
			up: 9,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}],
		[{
			up: 1,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '自身',
		}, {
			up: 10,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '次月',
		}, {
			up: 5,
			dir: 0,
			front: '',
			back: '',
			state: '心态',
			label: '未来',
		}],
		[{
			up: 3,
			dir: 0,
			front: '',
			back: '',
			state: '心态',
			label: '自身',
		}, {
			up: 4,
			dir: 0,
			front: '',
			back: '',
			state: '心态',
			label: '对方',
		}, {
			up: 7,
			dir: 0,
			front: '',
			back: '',
			state: '阻碍',
			label: '双方',
		}, {
			up: 8,
			dir: 0,
			front: '',
			back: '',
			state: '结局',
			label: '最终',
		}],
		[{
			up: 2,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '对方',
		}, {
			up: 11,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '三月',
		}, {
			up: 6,
			dir: 0,
			front: '',
			back: '',
			state: '心态',
			label: '未来',
		}],
		[{
			up: 12,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '四月',
		}]
	])
	isAch.value = uni.getStorageSync('user').ach
	onMounted(() => {
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				dataFormat()
			}
		})
	})
	const dataFormat = () => {
		list.value.map(arr => {
			arr.map((item) => {
				cardList.value.map((card, idx) => {
					if (item.up == (idx + 1)) {
						item.dir = card.dir
						item.front = card.tarot.front
						item.back = card.tarot.back
					}
				})
			})
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		padding: 40rpx 0;
		height: auto;
	}

	.spread-item {
		position: relative;
	}
</style>